<template>
	<view class="healthinfo">
		<view class="header-box">
			<image class="header-img" src="/static/helath/runnning.png" mode=""></image>
		</view>
		<u-cell-group>
			<block v-for="(item,index) in healthList" :key="index">
				<u-cell size="large" :icon="item.icon" :title="item.title" isLink @click="doEdit(index)">
					<view slot="value" class="u-slot-value">
						<text class="attribute" v-if="item.value===0">--</text>
						<text class="attribute" v-if="item.value!==0">{{item.value}}</text>
						<text class="unit" v-if="item.value!==0">{{item.unit}}</text>
					</view>
				</u-cell>
			</block>
		</u-cell-group>
		<view class="btn-box">
			<u-button text="保存信息" @click="doSendEdit"
				color="linear-gradient(to right, rgb(54, 183, 183), rgb(130, 149, 183))"></u-button>
		</view>
		<u-modal :title="dialogTitle" :show="show" :content="content" closeOnClickOverlay showCancelButton
			width="550rpx">
			<u--input :placeholder="placeHolder" border="bottom" clearable v-model="inputValue"></u--input>
			<u-button slot="confirmButton" text="确定" type="success" shape="circle" @click="doConfirm"
				color="linear-gradient(to right, rgb(54, 183, 183), rgb(130, 149, 183))"></u-button>
			<u-button slot="confirmButton" text="取消" type="" shape="circle" @click="show = false"></u-button>
		</u-modal>
	</view>
</template>

<script>
	import { changeUserInfo } from '@/config/api.js'
	import { mapState, mapActions } from 'vuex'
	export default {
		data() {
			return {
				healthList: [],
				bmi: 0,
				currDialogIndex: -1,
				show: false,
				dialogTitle: '',
				placeHolder: '',
				inputValue: ''
			}
		},
		onLoad() {

			if (this.userinfo.height !== 0 && this.userinfo.weight !== 0) {
				this.bmi = (this.userinfo.weight / Math.pow(this.userinfo.height / 100, 2)).toFixed(2)
			}
			this.healthList = [{
					title: '身高',
					value: this.userinfo.height,
					eTitle: 'height',
					unit: 'cm',
					icon: '/static/helath/height.png'
				},
				{
					title: '体重',
					value: this.userinfo.weight,
					eTitle: 'weight',
					unit: 'kg',
					icon: '/static/helath/weight.png'
				},
				{
					title: '胸围',
					value: this.userinfo.bust,
					eTitle: 'bust',
					unit: 'cm',
					icon: '/static/helath/bust.png'
				},
				{
					title: '腰围',
					value: this.userinfo.waistline,
					eTitle: 'waistline',
					unit: 'cm',
					icon: '/static/helath/waistline.png'
				},
				{
					title: '臀围',
					value: this.userinfo.hipline,
					eTitle: 'hipline',
					unit: 'cm',
					icon: '/static/helath/hipline.png'
				},
				{ title: 'BMI', value: this.bmi, eTitle: 'BMI', unit: '', icon: '/static/helath/bmi.png' },
				{
					title: '静息心率',
					value: this.userinfo.rhr,
					eTitle: 'rhr',
					unit: 'bpm',
					icon: '/static/helath/rhr.png'
				},
				{
					title: '最大心率',
					value: this.userinfo.mhr,
					eTitle: 'mhr',
					unit: 'bpm',
					icon: '/static/helath/mhr.png'
				},
			]
		},
		computed: {
			...mapState(['userinfo', 'loginState']),
		},
		methods: {
			...mapActions(['updateuserinfo', ]),
			//修改框
			doEdit(index) {
				if (index !== 5) {
					switch (index) {
						case 1:
							this.placeHolder = '请输入体重(单位：kg)'
							break
						case 0:
						case 2:
						case 3:
						case 4:
							this.placeHolder = '请输入你的' + this.healthList[index].title + '(单位：cm)'
							break
						case 6:
						case 7:
							this.placeHolder = '请输入你的' + this.healthList[index].title + '(单位：bpm)'
							break
					}
					this.currDialogIndex = index
					this.show = !this.show
					this.dialogTitle = '请输入你的' + this.healthList[index].title
				}
			},
			//修改框确认判断
			doConfirm() {
				let str = this.inputValue
				if (str.length > 0) {
					if (isNaN(str)) {
						this.showMyToast('请输入数字')
						return
					}
					if (!(/^(?!0)\d{1,3}$/.test(str))) {
						this.showMyToast('请输入1-999')
						return
					}
					this.healthList[this.currDialogIndex].value = Number(this.inputValue)
					this.healthList[this.currDialogIndex].flag = true
					this.show = !this.show
					this.inputValue = ''

				} else {
					this.showMyToast('您还为未输入内容')
				}
			},
			//保存信息操作
			async doSendEdit() {
				uni.showLoading({
					title: '保存信息中',
					mask: true
				})
				let changeFlag = false
				for (let item of this.healthList) {
					if (item.flag) {
						changeFlag = true
					}
					if(item.eTitle!=='BMI'){
						this.userinfo[item.eTitle] = item.value
					}
				}
				//判断是否修改数据
				if (changeFlag) {
					const res2 = await changeUserInfo(this.userinfo)
					this.updateuserinfo(res2.data)
				} else {
					this.showMyToast('您还未对信息进行更改')
					return
				}
				setTimeout(() => {
					uni.hideLoading()
					uni.navigateBack({
						success() {
							uni.showToast({
								title: "修改成功",
								duration: 1000,
								icon: 'none'
							})
						}
					})
				}, 1000)
			},
			showMyToast(str) {
				uni.showToast({
					title: str,
					duration: 1000,
					icon: 'none'
				})
			}
		},

	}
</script>

<style lang="less" scoped>
	.healthinfo {

		.header-img {
			display: block;
			height: 300rpx;
			margin: 20rpx auto;
		}

		.btn-box {
			width: 600rpx;
			margin: 50rpx auto;
		}
	}
</style>
